<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>腾讯LBS测试</title>
    <style type="text/css">
    * {
        margin: 0px;
        padding: 0px;
    }

    body,
    button,
    input,
    select,
    textarea {
        font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
    }

    p {
        width: 603px;
        padding-top: 3px;
        overflow: hidden;
    }

    #container {
        min-width: 603px;
        min-height: 767px;
    }
    </style>
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
    <script>
    var init = function() {
        var marker = null;

        //设置Marker自定义图标的属性，size是图标尺寸，该尺寸为显示图标的实际尺寸，origin是切图坐标，该坐标是相对于图片左上角默认为（0,0）的相对像素坐标，anchor是锚点坐标，描述经纬度点对应图标中的位置
        var anchor = new qq.maps.Point(10, 30),
            size = new qq.maps.Size(40, 40),
            origin = new qq.maps.Point(4, 0),
            icon = new qq.maps.MarkerImage(
                "./anchor.png",
                size,
                origin,
                anchor
            ); 

        var map = new qq.maps.Map(document.getElementById("container"), {
            center: new qq.maps.LatLng(39.916527, 116.397128),
            zoom: 13
        });

        // 绑定单击事件添加参数
        qq.maps.event.addListener(map, 'click', function(event) {
            if (marker) {
                marker.setMap(null);
            }
            console.log('marker定位到了: [' + event.latLng.getLat() + ', ' + event.latLng.getLng() + ']');
            updateLoc(event.latLng.getLat(), event.latLng.getLng())

            // 创建marker 
            marker = new qq.maps.Marker({
                position: new qq.maps.LatLng(event.latLng.getLat(), event.latLng.getLng()),
                map: map,
                draggable: true
            });

            // 设置marker图标
            marker.setIcon(icon); 

            // 监听marker拖动结束，获取结束时的坐标
            qq.maps.event.addListener(marker, 'dragend', function() {
                var loc = marker.getPosition();
                map.setCenter(loc);
                updateLoc(loc.lat, loc.lng)
                console.log('marker拖动到了: [' + loc.lat, loc.lng + ']');
            });
        });

    }

    var updateLoc = function(lat, lng) {
        document.getElementById('result').innerHTML = `${lat},${lng}`
    }
    </script>
</head>

<body onload="init()">
    <div id="container"></div>
    <p>给地图绑定了点击事件获取坐标，添加marker，拖动marker获取坐标。</p>
    <h3 id="result"></h3>
</body>

</html>